<template>
    <el-row>
        <el-col class="btn">
            <el-dialog :visible.sync="dialogVisible" width="625px" :before-close="handleClose" @close="handleClose()">
                <div slot="title" class="dialog-title box box-align-center">
                    <i class="title-icon"></i>
                    <span class="title-text ml10">{{title}}</span>
                </div>
                <el-form ref="lineForm" :inline="true" :model="lineForm">
                    <el-form-item label="学校" :label-width="labelWidth">
                        <el-select filterable @change="changeSchool" v-model="lineForm.schoolId" class="text">
                            <el-option v-for="(item,index) in schoolList" :key="index" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-input placeholder="搜索教师姓名/教职工号" v-model="lineForm.shText" @input="getTrlist()">
                            <i slot="suffix" class="el-input__icon el-icon-search cp" @click="xxlb()"></i>
                        </el-input>
                    </el-form-item>


                    <el-table ref="singleTable" :data="page.list" highlight-current-row
                        @current-change="handleCurrentChange" style="width: 100%">
                        <el-table-column type="index" width="50"></el-table-column>
                        <el-table-column property="name" label="姓名" width="120"></el-table-column>
                        <el-table-column property="userCode" label="账号" width="120"></el-table-column>
                        <el-table-column property="zgh" label="教职工号" width="120"></el-table-column>
                        <el-table-column property="mobile" label="手机号"></el-table-column>
                    </el-table>
                    <el-pagination @current-change="getTrlist" background layout="prev, pager, next" :total="page.total"
                        :current-page="page.pageNum" :page-size="page.pageSize" hide-on-single-page></el-pagination>
                    </div>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button class="reset-cancel-btn" @click="handleClose()">取 消</el-button>
                    <el-button class="reset-comfirm-btn" @click="zdgly()">确 定</el-button>
                </span>
            </el-dialog>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        props: {
            dialogVisible: {
                default: false
            },
            title: {
                default: '提示'
            }
        },
        data() {
            return {
                user: this.$store.state.user,
                schoolid:this.$store.state.schoolId,
                role:this.$store.state.maxRole,
                team_schoolid:this.$store.state.loginInfo.user.schoolId,
                schoolList: [],
                searchText: '',
                lineForm: {
                    role: '',
                    schoolId: '',
                    name: '',
                    userCode: '',
                    shText: '',
                    userid: 0
                },
                page: {
                    total: 0,
                    pageSize: 5,
                    pageNum: 1,
                    list: []
                },
                labelWidth: '100px',
                trlist: [],
            }
        },
        mounted() {
            this.searchSchool();
        },
        methods: {
            handleCurrentChange(e){
                this.lineForm.userid = e.id;
            },
            handleClose() {
                this.$emit('closeTk');
            },
            changeType(e) {
                this.lineForm.role = e;
            },
            searchSchool(searchText) {
                this.$api.szhgl.xxlb({
                    'searchText': searchText,
                    'schoolid':this.role=='team'?this.team_schoolid:null
                }).then(res => {
                    if (res.code == '0') {
                        this.schoolList = res.list;
                        this.getTrlist();
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            changeSchool(e) {
                if (e != 0) {
                    this.lineForm.schoolId = e;
                    this.getTrlist();
                }
            },
            getTrlist(pageNum) {
                var parms = {
                    'schoolid': this.lineForm.schoolId,
                    'searchtext': this.lineForm.shText,
                    'pageNum': pageNum,
                    'pageSize':this.page.pageSize
                };
                this.$api.szhgl.getTrList(parms).then(res => {
                    this.page = res.list;
                })
            },
            zdgly() {
                var parms = {
                    'userid': this.lineForm.userid
                };
                this.$api.szhgl.zdgly(parms).then(res => {
                    if (res.code == '0') {
                        this.$emit('updateList')
                        this.$message.success('操作成功！');
                        this.handleClose();
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .main {
        height: 100%;

        .create-btn {
            width: 182px;
            background-color: #4c87ff;
            border-radius: 21px;
        }

        .el-dialog-div {
            display: flex;
            flex-direction: column;
            height: 400px;

            .info {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .info-form {
                    display: flex;
                    // width: 403px;
                    height: 218px;

                    .img-up {
                        margin-left: 50px;
                        display: grid;
                    }
                }

                .upPic {
                    width: 304px;
                    height: 216px;
                    background-color: #f8f9fd;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    border: solid 1px #d6dbe8;
                    border-radius: 5px;
                }

                .line-center {
                    display: flex;
                    flex-direction: column;
                    // justify-content: flex-start;
                    align-content: space-between;
                }
            }

            .type {
                padding: 0 0 30px 0;
                width: 100%;
                height: 190px;

                .type-item {
                    display: flex;
                    justify-content: center;

                    // align-items: center;
                    .type-list {
                        margin-right: 20px;
                        width: 229px;
                        height: 158px;
                        background-color: #fefefe;
                        border-radius: 5px;
                        border: solid 1px #d6dbe8;

                        .type-bg {
                            text-align: center;
                            width: 100%;
                            height: 103px;
                        }

                        .type-info {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;

                            .n1 {
                                font-size: 18px;
                                color: #2e323e;
                            }

                            .n2 {
                                font-size: 12px;
                                color: #888fa0;
                            }
                        }

                        // &:hover {
                        // 	cursor: pointer;
                        // 	border: solid 1px #5b90ff;
                        // }

                        &.checked {
                            border: solid 1px #5b90ff;
                        }
                    }
                }

            }
        }
    }

    .h-auto {
        height: calc(100% - 80px);
    }

    .slt {
        margin: 15px auto 0;
        width: 300px;
        height: 83px;
        box-sizing: border-box;
        overflow-x: scroll;
        white-space: nowrap;
    }

    .slt .img {
        width: 48px;
        height: 48px;
        margin-right: 10px;
        border: 2px solid #fff;
    }

    .slt .img.checked {
        border: 2px solid #00aeff;
    }


    .up-img-div {
        position: relative;
        width: 300px;
        height: 224px;
    }

    .el-upload {
        position: relative;
    }

    .posa-icon {
        background: rgba(3, 3, 3, .3);
        border-radius: 2px;
        padding: 0 15px 0 15px;
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .el-upload {
        height: 144px;
    }

    .avatar {
        width: 298px;
        height: 244px;
        display: block;
    }

    .class-list {

        &>>>.el-form-item__content {
            display: flex;
        }
    }

    .add-course>>>.el-dialog {
        height: 100%;
    }

    .psa-img {
        padding-top: 10px;
    }

    .addclassbtn {
        margin: 0 0 5px 235px;
    }

    .delcs {
        margin-left: 10px;
    }
</style>
